<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<!-- 插入和替换元素操作:针对元素增删改操作
		append（）              功能：在匹配元素集合中所有元素的内部末尾插入内容
		 prepend（）            功能：在匹配元素集合中所有元素的内部开头插入内容
		 
		 after（）                   功能：在匹配元素集合中所有元素的后面插入内容
		 before（）                功能：在匹配元素集合中所有元素的前面插入内容
		 
		 remove（）
		 empty（）
		 
		 replaceWith（）
		 -->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
		button{
			padding: 10px 15px;
			margin: 5px;
			cursor: pointer;
		}
		body{
			margin: 20px;
		}
		#target{
			border: 5px solid #58ffff;
			padding: 10px;
			margin: 10px;
			border-radius: 5px;
		}
		</style>
	</head>
	<body>
		<!-- html：7个按钮   div包扩p包含：目标元素的初始段落      id=“target”；
		                                 div包括p包含：插入新元素的初始段落   id=“newElement”；  隐藏
				css  按钮   ：外边距包括5px  ，内外边距：10px  15px   鼠标移动上：手指显示
                      body：  外边距20px
					 #target： 像素边框 、内边距：10px 	上外边距：10px		  
										 -->
			<button id="appendBtn">内部末尾插入元素</button>
			<button id="prependBtn">内部开头插入元素</button>
			<button id="afterBtn">外部后面插入元素</button>
			<button id="beforeBtn">外部前面插入元素</button>
			<button id="btn"></button>
			<button id="btn"></button>
			<button id="btn"></button>
			<!-- 目标显示区域 -->
			<div id="target">
				<p>目标元素的初始段落</p >
			</div>
			<!-- 用于插入和替换的区域 -->
			<div id="newElement" style="display: none;">
				<p>插入新元素的初始段落</p >
			</div>
			<script>
				/* 点击  内部末尾插入元素  按钮  p 文本后面追加新元素中包含内容操作 */
				$("#appendBtn").click(function(){
					//效果：  点击按钮  追加新元素--自带内容
					//1.1  追加内容是新元素--克隆--html结构全部复制出来，元素包含属性
					 var cpe=$("#newElement").click();
						//clone（）  创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
						//1.2   自带属性和属性值  ：隐藏--改成显示
						cpe.css("display","block");
						//1.3  将复制出来的新元素，追加给当前元素上
					$("#target").append(cpe);
				});
					/* 2.点击   内部末尾插入元素   按钮   p   文本后面追加新元素中包含内容操作 */
								$("#prependBtn").click(function(){
									 var cpe=$("#newElement").click();
									 cpe.css("display","block");
									 $("#target").prepend(cpe);
									 });
						/* 3.点击  外部后面插入元素  按钮  p文本后面追加新元素中包含内容操作 */
										$("#afterBtn").click(function(){
											var cpe=$("#newElement").clone();
											cpe.addClass("boss"); //替换成：addClass函数
											$("#target").after(cpe);
										});
								/* 4.点击   外部前面插入元素   按钮   p   生成 图形  保留背景色  文本不需要，
								   $("#beforeBtn")                                                              
								   背景图  300*300     */
																								
									 $("#beforeBtn").click(function(){
												var cpe=$("#newElement").click();
												cpe.css({"width":"300px",
										         "height":"300px",
												"background-color":"#ff0",
												"border-radius":"5px",
										        "background-image":"url(../img/可爱.gif)",
												"background-size":"100% 100%",
											    "color":"transparent",
												"display":"block"
																																	
																			});
												 $("#target").before(cpe);
														 });
						/*5.点击 删除元素  按钮 页面上所有元素包括子元素全部删除[盒子模型]*/
							$("#removeBtn")	.click(function(){
								$("#target").empty();      
							})										 
							</script>
					</body>
				</html>